<template>
	<view class="h-full">
		<home v-if="PageCur=='home'"></home>
		<articlelist v-if="PageCur=='device'"></articlelist>
		<news v-if="PageCur=='maintenance'"></news>
		<my v-if="PageCur=='consumables'"></my>
		<view v-show="store.theme === 'light'" class="cu-bar tabbar bg-white foot">
			<view class="action" :class="PageCur=='home'?'text-cyan':''" @click="NavChange" data-cur="home">
				<view class="cuIcon-cu-image">
					<image :src="PageCur=='home'?'/static/menu/homefill.svg':'/static/menu/home.svg'"></image>
				</view>
				<view class="text-xs">{{ $t('index.home') }}</view>
			</view>
			<view class="action" :class="PageCur=='device'?'text-cyan':''" @click="NavChange" data-cur="device">
				<view class="cuIcon-cu-image">
					<image :src="PageCur=='device'?'/static/menu/messagefill.svg':'/static/menu/message.svg'"></image>
				</view>
				<view class="text-xs">{{ $t('index.device') }}</view>
			</view>
			<view class="action add-action" @click="ScanCode()">
				<button class="cu-btn cuIcon-cu-image bg-cyan shadow">
					<image src="@/static/menu/scan.svg"></image>
				</button>
				<!-- 扫码 -->
			</view>
			<view class="action" :class="PageCur=='maintenance'?'text-cyan':''" @click="NavChange" data-cur="maintenance">
				<view class="cuIcon-cu-image">
					<image :src="PageCur=='maintenance'?'/static/menu/interestfill.svg':'/static/menu/interest.svg'"></image>
				</view>
				<view class="text-xs">{{ $t('index.maintenance') }}</view>
			</view>
			<view class="action" :class="PageCur=='consumables'?'text-cyan':''" @click="NavChange" data-cur="consumables">
				<view class="cuIcon-cu-image">
					<image :src="PageCur=='consumables'?'/static/menu/myfill.svg':'/static/menu/my.svg'"></image>
				</view>
				<view class="text-xs">{{ $t('index.consumables') }}</view>
			</view>
		</view>
		<view v-show="store.theme === 'dark'" class="cu-bar tabbar bg-black foot">
			<view class="action" :class="PageCur=='home'?'text-cyan':''" @click="NavChange" data-cur="home">
				<view class="cuIcon-cu-image">
					<image :src="PageCur=='home'?'/static/menu/homefill.svg':'/static/menuDark/home.svg'"></image>
				</view>
				<view class="text-xs">{{ $t('index.home') }}</view>
			</view>
			<view class="action" :class="PageCur=='device'?'text-cyan':''" @click="NavChange" data-cur="device">
				<view class="cuIcon-cu-image">
					<image :src="PageCur=='device'?'/static/menu/messagefill.svg':'/static/menuDark/message.svg'"></image>
				</view>
				<view class="text-xs">{{ $t('index.device') }}</view>
			</view>
			<view class="action add-action" @click="ScanCode()">
				<button class="cu-btn cuIcon-cu-image bg-cyan shadow">
					<image src="@/static/menu/scan.svg"></image>
				</button>
				<!-- 扫码 -->
			</view>
			<view class="action" :class="PageCur=='maintenance'?'text-cyan':''" @click="NavChange" data-cur="maintenance">
				<view class="cuIcon-cu-image">
					<image :src="PageCur=='maintenance'?'/static/menu/interestfill.svg':'/static/menuDark/interest.svg'"></image>
				</view>
				<view class="text-xs">{{ $t('index.maintenance') }}</view>
			</view>
			<view class="action" :class="PageCur=='consumables'?'text-cyan':''" @click="NavChange" data-cur="consumables">
				<view class="cuIcon-cu-image">
					<image :src="PageCur=='consumables'?'/static/menu/myfill.svg':'/static/menuDark/my.svg'"></image>
				</view>
				<view class="text-xs">{{ $t('index.consumables') }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { useStore } from '@/store'
	
	const router = useRouter()
	const store = useStore()
	
	const PageCur = ref('home')
	
	onMounted(()=>{
		
	})
	
	const NavChange = (e) => {
		PageCur.value = e.currentTarget.dataset.cur
	}
	
	const ScanCode = () => {
		console.log('进入扫码页面')
		uni.scanCode({
			onlyFromCamera: true,
			hideAlbum: true,
			scanType: "qrCode",
			success: (res) => {
				console.log('条码类型：' + res.scanType);
				console.log('条码内容：' + res.result);
				if(res && res.result){
					const cageId = res.result
					//使用正则验证二维码内容是不是一个正常的字符串
					const pattern = /^[a-zA-Z0-9\s]+$/;
					if (pattern.test(cageId)) {
					    console.log("ok");
					} else {
					    console.log("no");
						uni.showToast({
							icon:"none",
							title:"二维码内容有误"
						})
					}
				}else{
					uni.showToast({
						icon:"none",
						title:"二维码内容为空"
					})
				}
			}
		});
	}
</script>

<style>
	.bg-cyan {
		background-color: #1677ff;
		color: #ffffff;
	}
	
	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100upx;
		justify-content: space-between;
	}

	.cu-bar.foot {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
	}

	.cu-bar.tabbar {
		padding: 0;
		height: calc(100upx + env(safe-area-inset-bottom) / 2);
		padding-bottom: calc(env(safe-area-inset-bottom) / 2);
	}

	.cu-tabbar-height {
		min-height: 100upx;
		height: calc(100upx + env(safe-area-inset-bottom) / 2);
	}

	.cu-bar.tabbar.shadow {
		box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.1);
	}

	.cu-bar.tabbar .action {
		font-size: 22upx;
		position: relative;
		flex: 1;
		text-align: center;
		padding: 0;
		display: block;
		height: auto;
		line-height: 1;
		margin: 0;
		background-color: inherit;
		overflow: initial;
	}

	.cu-bar.tabbar .action.add-action {
		position: relative;
		z-index: 2;
		padding-top: 50upx;
	}

	.cu-bar.tabbar .action.add-action [class*="cuIcon-"] {
		position: absolute;
		width: 70upx;
		z-index: 2;
		height: 70upx;
		border-radius: 50%;
		line-height: 70upx;
		font-size: 50upx;
		top: -35upx;
		left: 0;
		right: 0;
		margin: auto;
		padding: 0;
		/* 新增，为了居中 */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.cu-bar.tabbar .action.add-action::after {
		content: "";
		position: absolute;
		width: 100upx;
		height: 100upx;
		top: -50upx;
		left: 0;
		right: 0;
		margin: auto;
		box-shadow: 0 -3upx 8upx rgba(0, 0, 0, 0.08);
		border-radius: 50upx;
		background-color: inherit;
		z-index: 0;
	}

	.cu-bar.tabbar .action.add-action::before {
		content: "";
		position: absolute;
		width: 100upx;
		height: 30upx;
		bottom: 30upx;
		left: 0;
		right: 0;
		margin: auto;
		background-color: inherit;
		z-index: 1;
	}
	
	.cu-bar.tabbar .action .cuIcon-cu-image image {
		/* width: 36upx;
		height: 36upx; */
		width: 1.3rem;
		height: 1.3rem;
		display: inline-block;
	}
</style>
